<template>
  <div>
    <el-row class="create-body">
      <el-form ref="form" :model="form" :inline="true" label-width="90px">
        <el-row>
          <el-col :span="12">
          <el-form-item label="姓名" prop="user_name" :rules="filter_rules({required:true})">
            <el-input
              clearable
              style="width: 250px;"
              placeholder="请输入姓名"
              v-model.trim="form.user_name"
            ></el-input>
          </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="编号" prop="option_code" :rules="filter_rules({required:true})">
              <el-input
                clearable
                style="width: 250px;"
                placeholder="请输入编码"
                v-model.trim="form.option_code"
              ></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="封面" prop="file_path" :rules="filter_rules({type: 'upload'})">
              <div class="img-box" v-if="form.file_path">
                <img :src="form.file_path" width="100%" class="avatar" @click="sizeSet">
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon" @click="sizeSet"></i>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="简介" prop="option_desc" :rules="filter_rules({required:true})">
              <el-input style="width:250px"
                type="textarea"
                :rows="5"
                placeholder="请输入简介..."
                v-model.trim="form.option_desc">
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="详情">
              <el-input style="width:610px"
                type="textarea"
                :rows="5"
                placeholder="请输入详情..."
                v-model.trim="form.option_details">
              </el-input>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
    </el-row>
    <!-- <el-dialog :title="title" :visible.sync="isShow" width="60%" :append-to-body="true">
      <el-row>
        <el-form ref="form" :model="form" label-width="50px">
          <el-col :span="6">
            <el-form-item label="封面" prop="file_path" :rules="filter_rules({type: 'upload'})">
              <div class="img-box" v-if="form.file_path">
                <img :src="form.file_path" width="100%" class="avatar" @click="sizeSet">
              </div>
              <i v-else class="el-icon-plus avatar-uploader-icon" @click="sizeSet"></i>
            </el-form-item>
          </el-col>
          <el-col :span="17" :offset="1">
            <el-form-item label="简介" prop="option_desc" :rules="filter_rules({required:true})">
              <textarea
                v-focus
                cols="50"
                rows="3"
                style="padding: 10px; border-radius: 5px;"
                placeholder="请输入详情..."
                v-model.trim="form.option_desc"
              ></textarea>
            </el-form-item>
            <el-form-item label="详情">
              <textarea
                cols="50"
                rows="10"
                style="padding: 10px; border-radius: 5px;"
                placeholder="请输入详情..."
                v-model.trim="form.option_details"
              ></textarea>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">保 存</el-button>
      </span>
    </el-dialog> -->
    <section>
      <size-temp2 ref="size" :img.sync="form.file_path" title="选项图片设置"></size-temp2>
    </section>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
import sizeTemp2 from "@/components/draggableSize/index2";

/* doc 
    类型二的选项设置 模板
*/
export default {
  name: "twoTemp",
  props: {
    title: String
  },
  directives: {
    focus: {
      // 指令的定义
      inserted: function(el) {
        el.focus();
      }
    }
  },
  data() {
    return {
      form: { file_path: "" },
      ossPublicUrl: localStorage.getItem("ossPublicUrl"),
      isShow: false
    };
  },
  components: {
    sizeTemp2
  },
  computed: {
    ...mapGetters(["vtDecide"])
  },
  methods: {
    sizeSet() {
      this.$refs.size.open();
    },
    beforeAvatarUpload(file) {
      let name = file.name.split(".");
      if (
        name[name.length - 1] === "jpg" ||
        name[name.length - 1] === "jpeg" ||
        name[name.length - 1] === "png"
      ) {
        return file;
      } else {
        this.$message.error("图片只能是 jpeg/png 格式!");
        return false;
      }
    },
    handleSuccess(res, file, fileList) {
      if (res.status == 100) {
        this.form.file_path = this.ossPublicUrl + "/" + res.data.file_path;
      }
    },
    openForm() {
      this.isShow = true;
    },
    async setForm(e) {
      this.form = e;
    },
    clearForm() {
      this.form = {};
    },
    onSubmit(){
      this.$refs["form"].validate((valid) => {
        if (valid) {
          this.isShow = false
        } else {
          return false;
        }
      });

    },
    async validate() {
      try {
        await this.$refs["form"].validate();
      } catch (flag) {
        //falg 此处为 false全局 vtIsSub = false
        await this.$store.dispatch("SetIsSub", false);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;

.create-body {
  padding-top: 10px;
}

.avatar-uploader {
  .el-upload {
    border: $border;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    &:hover {
      border-color: #409eff;
    }
  }
}

.avatar-uploader-icon {
  border: $border;
  font-size: 28px;
  color: #8c939d;
  width: $picture-size;
  height: $picture-size;
  line-height: $picture-size;
  text-align: center;
  border-radius: 5px;
}

.avatar {
  width: $picture-size;
  height: $picture-size;
  display: block;
  border-radius: 5px;
  cursor: pointer;
}
</style>
